import { Input, Button, Form, Select, DatePicker } from 'antd';
import styles from '../components.less';
import moment from 'moment';

const dateFormat = 'YYYY-MM-DD';
const yearFormat = 'YYYY';
const { Option } = Select;
const EditableContext = React.createContext();
const EditableRow = ({ form, index, ...props }) => (
    <EditableContext.Provider value={form}>
        <tr {...props} />
    </EditableContext.Provider>
);
const EditableFormRow = Form.create()(EditableRow);
class EditableCell extends React.Component {
    state = {
        editing: false,
    };

    handleCurrencyChange = (currency, name) => {
        const { record, handleSave } = this.props;
        handleSave({ ...record, ...{ [`${name}`]: currency } });
    };
    handleDateChange(currency, name, pattern) {
        if (currency && typeof currency.format === 'function') {
            currency = currency.format(pattern);
            this.handleCurrencyChange(currency, name)
        }
    }
    renderCell = form => {
        this.form = form;
        const { children, dataIndex, record, title, type, optionData, name, disabled } = this.props;
        const { editing } = this.state;
        switch (type) {
            case 'input':
                return <Form.Item>
                    {form.getFieldDecorator(dataIndex, {
                        rules: [
                            {
                                required: true,
                                message: `${title} is required.`,
                            },
                        ],
                        initialValue: record[dataIndex],
                    })(<Input ref={node => (this.input = node)} onChange={(e) => this.handleCurrencyChange(e.target.value, name)} />)}
                </Form.Item>
                break;
            case 'select':
                return <Form.Item>
                    <Select value={String(record[dataIndex])} style={{ width: 120 }}
                        label={dataIndex} name={name} onChange={(e) => this.handleCurrencyChange(e, name)}>
                        {optionData.map(function name(params, index) {
                            return (<Option key={params.value || index} value={params.value}>{params.name}</Option>)
                        })}
                    </Select>
                </Form.Item>
                break;
            case 'yearPicker':
                return <Form.Item>
                    {form.getFieldDecorator(dataIndex, {
                        rules: [
                            {
                                required: true,
                                message: `${title} is required.`,
                            },
                        ],
                        initialValue: moment(record[dataIndex], yearFormat),
                    })(<DatePicker format={yearFormat} onChange={(e) => this.handleDateChange(e, name, 'YYYY')} picker="year" />)}
                </Form.Item>
                break;
            case 'datePicker':
                return <Form.Item>
                    {form.getFieldDecorator(dataIndex, {
                        rules: [
                            {
                                required: true,
                                message: `${title} is required.`,
                            },
                        ],
                        initialValue: moment(record[dataIndex], dateFormat),
                    })(<DatePicker format={dateFormat} onChange={(e) => this.handleDateChange(e, name, 'YYYY-MM-DD')} />)}
                </Form.Item>
                break;
            default:
                return <div
                    className="editable-cell-value-wrap"
                    style={{ paddingRight: 24 }}
                    onClick={this.toggleEdit}
                >
                    {children}
                </div>
        }
    };

    render() {
        const {
            type,
            children,
        } = this.props;
        return (
            <td {...this.props}>
                {type ? (
                    <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
                ) : (
                        children
                    )}
            </td>
        );
    }
};

export default {
    EditableFormRow,
    EditableCell
}